<template>
  <div id="zhe1" style="height: 100%; width: 100%;"></div>
</template>

<script>
import request from "../utils/request";

export default {
  name: "Test-bing",
  methods: {
    getData() {
      setInterval(() => {
        request.get("/cov/f3").then((res) => {
          this.dataList = res.data;
          this.initEcharts();
        });
      }, 3000);
    },
    initEcharts() {
      var chartDom = document.getElementById("zhe1");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "近五日死亡人数折线图",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: ["第一日", "第二日", "第三日", "第四日", "第五日"],
          axisLabel: {
            //修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: "#0def72", //改变折线点的颜色
                lineStyle: {
                  color: "#00ff24", //改变折线颜色
                },
              },
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
        ],
      };

      myChart.setOption(option);
    },
  },
  mounted() {
    this.initEcharts();
  },
};
</script>

<style scoped>
</style>
